@import 'theme/variables';

.balanceRowContainer {
  display: flex;
  justify-content: center;
  margin: 3em 0 2em 0;
  height: 90px;
}

.balanceRow {
  display: flex;
  padding: 0 1em;
  border: 1px solid $gray;
  border-radius: 6px;
  background-color: $verylightgray;
  font-size: 0.8em;
  font-weight: bold;

  .balanceWrapper {
    display: flex;
  }

  .balanceSymbol {
    align-self: center;
    padding-bottom: 1.2em;
  }

  .balanceItem {
    flex: 1;
    padding: 0.5em 0;

    .balanceAmount {
      display: inline-block;
      padding: 1em;
      margin: 0.5em;
      border: 1px solid $gray;
      border-radius: 6px;
      background-color: white;

      &.neg {
        color: $red;
      }
      &.pos {
        color: $green;
      }
    }

    .balanceTitle {
      text-align: center;
    }
  }

}
